<template>
	<view class="app-container">
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" isGoIndex></authorize>
		<mescroll-body ref="mescrollUni" @init="mescrollInit" class="app-mescroll" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="item-wrap" v-for="(item, index) in list" :key="index" :index="index" @click="navTo(item)">
				<view class="cu-card article">
					<view class="cu-item box-shadow">
						<view class="title">
							<view class="text-cut" data-name="标题">{{ item.title }}</view>
						</view>
						<view class="content">
							<image style="width: 200rpx;height: 200rpx;" :src="fileUrl + item.cover_path" mode="aspectFill"></image>
							<view class="desc">
								<view class="text-content" data-name="简介">{{ item.intro }}</view>
								<view>
									<view class="cu-tag bg-green light sm round" :class="{'bg-red': item.status === 2}">{{ item.status | filterStatus}}</view>
									<view class="cu-tag bg-green light sm round" v-show="item.status === 0">开始时间: {{item.start_date}}</view>
									<view class="cu-tag bg-orange light sm round" v-show="item.status === 1">即将结束: {{item.end_date}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
import { feedbackInsert } from '@/api/user';
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { getDiscountCouponActivityInfoList } from '@/api/common.js';
import { VUE_APP_BASE_API } from '@/common/tools/config.js';
import authorize from '@/components/authorize/authorize';
export default {
	mixins: [MescrollMixin],
	name: 'index',
	components: {
		MescrollBody,
		authorize
	},
	data() {
		return {
			isHidden: false,
			fileUrl: VUE_APP_BASE_API,
			downOption: {
				auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
				native: true // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效
			},
			// 上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
			},
			value: '',
			list: []
		};
	},
	filters: {
		filterStatus(value) {
			const status = {
				0: '未开始',
				1: '进行中',
				2: '已结束'
			}
			return status[value]
		}
	},
	methods: {
		onLoadFun() {
			this.mescroll.resetUpScroll();
		},
		/**
		 * 下拉刷新的回调
		 * @param {Object} mescroll
		 */
		downCallback(mescroll) {
			mescroll.resetUpScroll();
		},
		/**
		 * 查询活动信息列表
		 */
		getDiscountCouponActivityInfoList({ pageSize, currentPage }) {
			return new Promise((resolve, reject) => {
				getDiscountCouponActivityInfoList({
					type: 1,
					pageSize: pageSize,
					currentPage: currentPage
				})
					.then(res => {
						resolve(res.result);
					})
					.catch(err => {
						reject(err);
					});
			});
		},
		/**
		 * 上拉加载的回调
		 * @param {num} 页码, 默认从1开始
		 * @param {size} 页长, 默认每页10条
		 */
		upCallback(mescroll) {
			const { num, size } = mescroll;
			this.getDiscountCouponActivityInfoList({
				status: '',
				pageSize: size,
				currentPage: num
			})
				.then(result => {
					if (num == 1) this.list = [];
					this.list = this.list.concat(result.showing);
					mescroll.endBySize(result.showing.length, result.total);
				})
				.catch(err => {
					// 失败隐藏下拉加载状态
					mescroll.endErr();
				});
		},
		navTo(item) {
			uni.navigateTo({
				url: '/user-pages/activity-details?id=' + item.discount_coupon_activity_id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.app-container {
	width: 100%;
	height: 100vh;
	background-image: url();
	// background: url('https://w.wallhaven.cc/full/13/wallhaven-13mk9v.jpg') no-repeat center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	.cu-card > .cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}
}
/deep/ .mescroll-uni-fixed {
	top: 30rpx !important;
}
</style>
